<template>
    <div class="mobile-agency-detail">
        <div class="header">
            <div class="title">代办详情</div>
            <div class="status" :class="{ done: detail?.isTrue1 == 2, overtime: overtimeDisplay }">
                {{ detail?.isTrue1 == 2 ? '已完成' : '未完成' }}
                <span v-if="overtimeDisplay" class="overtime-flag">超</span>
            </div>
        </div>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else class="content">
            <div class="row">
                <span class="label">项目</span>
                <span class="value">{{ detail?.itemName || '-' }}</span>
            </div>
            <div class="row">
                <span class="label">安排人</span>
                <span class="value">{{ detail?.oneUserName || '-' }}</span>
            </div>
            <div class="row">
                <span class="label">被安排人</span>
                <span class="value">{{ detail?.manyUserName || '-' }}</span>
            </div>
            <div class="row">
                <span class="label">任务内容</span>
                <span class="value">{{ detail?.oneToManyJob || '-' }}</span>
            </div>
            <div class="row">
                <span class="label">完成时间</span>
                <span class="value" :class="{ overtime: overtimeDisplay }">{{ detail?.oneToManyTime || '-' }}</span>
            </div>
            <div class="row" v-if="detail?.overtimeReason">
                <span class="label">超时原因</span>
                <span class="value">{{ detail?.overtimeReason }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { CheckAgencyById } from '@/api/newDemands/index';

const route = useRoute();
const id = Number(route.params.id);
const loading = ref(true);
const detail = ref<any>(null);

const overtimeDisplay = computed(() => {
    if (!detail.value) return false;
    if (detail.value.overtimeReason && String(detail.value.overtimeReason).trim().length > 0) return true;
    // 兜底：未完成时按时间判断
    if (detail.value.isTrue1 != 2) {
        const now = new Date();
        const end = new Date(String(detail.value.oneToManyTime).replace(' ', 'T') + '+08:00');
        return now > end;
    }
    return false;
});

onMounted(async () => {
    const { data } = await CheckAgencyById(id);
    loading.value = false;
    if (data?.code === 200) {
        detail.value = data.data || null;
    } else {
        detail.value = null;
    }
});
</script>

<style scoped>
.mobile-agency-detail {
    min-height: 100vh;
    background: #f8fafc;
    padding: 12px;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}
.title { font-size: 16px; font-weight: 700; }
.status { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.2); }
.status.done { background: rgba(16, 185, 129, .25); }
.status .overtime-flag { margin-left: 6px; background: #ef4444; color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 10px; }
.content { margin-top: 12px; background: #fff; border-radius: 10px; padding: 12px; }
.row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; }
.row:last-child { border-bottom: none; }
.label { color: #64748b; font-size: 13px; }
.value { color: #1e293b; font-size: 13px; text-align: right; }
.value.overtime { color: #ef4444; font-weight: 600; }
.loading { text-align: center; padding: 24px; color: #64748b; }
</style>

